<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h2>上一页下一页按钮动态显示</h2>
			<div>
				<button v-show="pno >1" @click="onLast">上一页</button>
				<span>第{{pno}}页/共{{pcount}}页</span>
				<button v-show="pno<pcount" @click="onNext">下一页</button>
			</div>

		</div>
		<script>
			//页面需要显示: 
			//当前第几页pno和共几页 pcount
			//每单击下一页按钮，pno+1
			//只有pno<pcount时，下一页按钮才显示！
			//每单击上一页按钮，pno-1
			//只有pno>1时，上一页按钮才显示！
			Vue.createApp({
				data() {
					return {
						pno: 1,
						pcount: 5,
					}
				},
				methods: {
					onNext() {
						this.pno++;
					},
					onLast() {
						this.pno--;
					}
				}
			}).mount("#app");
		</script>
	</body>

</html>